<template>
    <page-body>
        <view class="page">
            <view class="flex align-stretch benben-position-layout flex recharge_flex_0" :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
                <view class='flex align-center justify-between flex-sub recharge_fd0_0'>
                    <view class='flex align-center recharge_fd0_0_c0' @tap.stop="handleJumpDiy" data-type="back" data-url="1">
                        <text class='fu-iconfont2  recharge_fd0_0_c0_c0'>&#xE794;</text>
                    </view>
                    <view class='flex align-center'>
                        <text class='recharge_fd0_0_c1_c0'>充值</text>
                    </view>
                    <view class='flex align-center recharge_fd0_0_c2'>
                    </view>
                </view>

            </view>
            <view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
            <!---flex布局flex布局开始-->
            <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout recharge_flex_1">
                <text class='recharge_fd1_0'>充值金额</text>
                <view class='flex flex-direction flex-wrap align-stretch recharge_fd1_1'>
                    <benben-select-diy ref="showSelectPopup1661330456288" class-name='flex flex-wrap align-center flex' :items.sync="rechargeType" 
					v-model="recharge_id" :label.sync="many" default-type="aid" default-label="payable_money" :allow-cancel='true' type="radio" :disabled='false'>
                        <template v-for='(item,key0) in rechargeType'>
                            <view v-if="item.isSelected" class='flex flex-direction align-center justify-center flex recharge_fd1_1_c0_c0' :key="key0" @tap="$refs.showSelectPopup1661330456288.tapHandle(key0)">
                                <view class='flex flex-wrap align-center'>
                                    <text class='recharge_fd1_1_c0_c0_c0_c0'>{{item.payable_money}}</text>
                                    <text class='recharge_fd1_1_c0_c0_c0_c1'>元</text>
                                </view>
                                <view class='flex flex-wrap align-center'>
									<text class='recharge_fd1_1_c0_c0_c1_c0'>{{item.name}}</text>
                                    <!-- <text class='recharge_fd1_1_c0_c0_c1_c0'>送</text>
                                    <text class='recharge_fd1_1_c0_c0_c1_c0'>{{item.real_arrival_money}}</text>
                                    <text class='recharge_fd1_1_c0_c0_c1_c0'>元</text> -->
                                </view>
                                <image class='recharge_fd1_1_c0_c0_c2' mode="aspectFit" :src='STATIC_URL+"82.png"'></image>
                            </view>
                            <view v-else class='flex flex-direction align-center justify-center flex recharge_fd1_1_c0_c1' :key="key0" @tap="$refs.showSelectPopup1661330456288.tapHandle(key0)">
                                <view class='flex flex-wrap align-center'>
                                    <text class='recharge_fd1_1_c0_c1_c0_c0'>{{item.payable_money}}</text>
                                    <text class='recharge_fd1_1_c0_c1_c0_c1'>元</text>
                                </view>
                                <view class='flex flex-wrap align-center'>
									<text class='recharge_fd1_1_c0_c0_c1_c0'>{{item.name}}</text>
                                    <!-- <text class='recharge_fd1_1_c0_c0_c1_c0'>送</text>
                                    <text class='recharge_fd1_1_c0_c0_c1_c0'>{{item.real_arrival_money}}</text>
                                    <text class='recharge_fd1_1_c0_c0_c1_c0'>元</text> -->
                                </view>
                            </view>
                        </template>
                    </benben-select-diy>
                </view>
            </view>

            <!---flex布局flex布局结束-->
            <!---flex布局flex布局开始-->
            <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout recharge_flex_2">
                <text class='recharge_fd2_0'>自定输入金额</text>
                <view class='flex flex-wrap align-center recharge_fd2_1'>
                    <text class='recharge_fd2_1_c0'>￥</text>
                    <benben-input class='flex-sub recharge_fd2_1_c1' type="digit" :placeholder="`0.00`" confirm-type="done" :maxlength="9" 
					placeholder-style="color:rgba(153, 153, 153, 1);font-size:32rpx" v-model="masys" @input="handleInputFunc" />
                </view>
                <text class='recharge_fd2_2'>选择支付方式</text>
                <benben-select-diy ref="showSelectPopup1661330466906" class-name='flex flex-direction flex-wrap align-stretch flex' :items.sync="payType" v-model="pay_id" default-type="value" default-label="name" :allow-cancel='false' type="radio" :disabled='false'>
                    <template v-for='(item,key0) in payType'>
                        <view v-if="item.isSelected" class='flex align-center flex recharge_fd2_3_c0' :key="key0" @tap="$refs.showSelectPopup1661330466906.tapHandle(key0)">
                            <image class='recharge_fd2_3_c0_c0' mode="aspectFill" :src='item.image'></image>
                            <text class='recharge_fd2_3_c0_c1'>{{item.name}}</text>
                            <image class='recharge_fd2_3_c0_c2' mode="aspectFit" :src='STATIC_URL+"2.png"'></image>
                        </view>
                        <view v-else class='flex align-center flex recharge_fd2_3_c0' :key="key0" @tap="$refs.showSelectPopup1661330466906.tapHandle(key0)">
                            <image class='recharge_fd2_3_c0_c0' mode="aspectFill" :src='item.image'></image>
                            <text class='recharge_fd2_3_c0_c1'>{{item.name}}</text>
                            <image class='recharge_fd2_3_c0_c2' mode="aspectFit" :src='STATIC_URL+"3.png"'></image>
                        </view>
                    </template>
                </benben-select-diy>
            </view>

            <!---flex布局flex布局结束-->
            <view class="flex align-center justify-center benben-position-layout flex recharge_flex_3">
                <button class='recharge_fd3_0' @tap.stop="chongzhi">立即充值</button>

            </view>
            <view :style="{height: '88rpx'}"></view>


        </view>
    </page-body>
</template>
<script>
    import {
        validate
    } from '@/common/utils/validate.js'

    export default {
        components: {},


        data() {
            return {
                "recharge_id": "",
                "pay_id": "1",
                "rechargeType": [],
				masys:'',
				many:'',
                "payType": [{
                    "name": "微信",
                    "value": "1",
                    "image":'https://yunshangxiaoyuans.oss-cn-beijing.aliyuncs.com/mini/images/40.png'
                }],
				postType:false,
				detal:'',
            };
        },
        computed: {

        },
        watch: {},
        onLoad(options) {

        },
        onUnload() {

        },
        onReady() {

        },
        onShow() {
            this.getij36f522d2dbe9Func()
        },
        onHide() {

        },
        onResize() {

        },
        onPullDownRefresh() {

        },
        onReachBottom(e) {

        },
        onPageScroll(e) {

        },
        methods: {
			async chongzhi(){
				// console.log(this.recharge_id)
				// return
				if(!this.masys && !this.recharge_id){
					this.$message.info("请选择充值金额");
					return
				}
				if(this.postType){
					return
				}
				this.postType = true
				let page = {
					pay_type:'wxpay',
				}
				if(this.recharge_id){
					page.product_id = this.recharge_id
					page.payable_money = this.many
				}else{
					page.payable_money = this.masys
				}
				// console.log(page,123)
				// return
				let datarechargeType = await this.$api.post(global.apiUrls.post636f632a12277,page);
				if (datarechargeType.data.code == 2) {
					uni.redirectTo({
						url: `/pages/my/czSuccess/czSuccess?money=${page.payable_money}`
					});
					return
				}
				if (datarechargeType.data.code != 1) {
					this.postType = false
					this.$message.info(datarechargeType.data.msg);
					return
				}
				this.detal = datarechargeType.data.data
				this.post62e335233b477(page.payable_money)
				// await this.requestPaymentWx(this.payInfo)
				// uni.redirectTo({
				// 	url: `/pages/my/czSuccess/czSuccess?money=${page.payable_money}`
				// });
			},
			async post62e335233b477(payable_money){
				// console.log(111111111)
				let res = await this.$api.post(global.apiUrls.post62e335233b477,{
					order_sn:this.detal.order_sn,
					wxpaytype:'MiniPay',
				});
				if (res.data.code != 1) {
					this.$message.info(res.data.msg);
					this.postType = false
					return
				}
				this.postType = false
				await this.requestPaymentWx(res.data.data)
				uni.redirectTo({
					url: `/pages/my/czSuccess/czSuccess?money=${payable_money}`
				});
			},
			//限制两位小数
			handleInputFunc(e) {
				console.log(e,1111)
				let price = e.match(/^\d*(\.?\d{0,2})/g)[0];
				let that = this;
				if (this.masys != price) {
					this.$nextTick(() => {
						this.masys = price
					})
					// this.$message.info("请输入正确金额");
					return
				}
						this.recharge_id = ''
				// for (var i = 0; i < this.rechargeType.length; i++) {
				// 	if(this.rechargeType[i].payable_money == this.masys){
				// 		this.recharge_id = this.rechargeType[i].aid
				// 	}
				// }
			},
            //钱包-获取充值规则
            async getij36f522d2dbe9Func() {
                //请求方法
                //数据验证

                let datarechargeType = await this.$api.get(global.apiUrls.post636f522d2dbe9, {

                });

                if (datarechargeType.data.code != 1) {
                    this.$message.info(datarechargeType.data.msg);
                    return
                }
                let inforechargeType = datarechargeType.data.data;
                this.rechargeType = inforechargeType
				console.log(this.rechargeType,123)

            }
        }
    };
</script>
<style lang="scss" scoped>
    .page {
        width: 100vw;
        overflow-x: hidden;
        min-height: calc(100vh - var(--window-bottom));
        background: rgba(248, 248, 248, 1);
        background-size: 100% auto;
    }

    .recharge_flex_0 {
        background: #fff;
        width: 750rpx;
        height: 88rpx;
        overflow: hidden;
        z-index: 10;
        top: 0rpx;
        background-size: 100% auto !important;
    }

    .recharge_fd0_0_c2 {
        width: 180rpx;
        height: 40rpx;
    }

    .recharge_fd0_0_c1_c0 {
        font-size: 36rpx;
        font-weight: 500;
        color: #333;
    }

    .recharge_fd0_0_c0_c0 {
        font-size: 32rpx;
        font-weight: 500;
        color: #333;
    }

    .recharge_fd0_0_c0 {
        width: 180rpx;
        height: 88rpx;
    }

    .recharge_fd0_0 {
        padding: 0rpx 32rpx 0rpx 32rpx;
        height: 88rpx;
    }

    .recharge_flex_1 {
        background: var(--benbenbgColor1);
        padding: 32rpx 0rpx 0rpx 0rpx;
        background-size: 100% auto;
        border-radius: 16rpx;
        margin: 24rpx 24rpx 24rpx 24rpx;
    }

    .recharge_fd1_1_c0_c1_c0_c1 {
        font-size: 28rpx;
        font-weight: 400;
        color: rgba(26, 26, 26, 1);
        line-height: 45rpx;
    }

    .recharge_fd1_1_c0_c1_c0_c0 {
        font-size: 40rpx;
        font-weight: 400;
        color: rgba(26, 26, 26, 1);
        line-height: 45rpx;
    }

    .recharge_fd1_1_c0_c1 {
        background: rgba(248, 248, 248, 1);
        margin: 0rpx 9rpx 36rpx 9rpx;
        width: 206rpx;
        height: 120rpx;
        border-radius: 18rpx;
        background-size: 100% auto;
    }

    .recharge_fd1_1_c0_c0_c2 {
        width: 48rpx;
        height: 48rpx;
        position: absolute;
        top: 0rpx;
        right: 0rpx;
    }

    .recharge_fd1_1_c0_c0_c1_c0 {
        font-size: 22rpx;
        font-weight: 400;
        color: #333333;
        line-height: 30rpx;
    }

    .recharge_fd1_1_c0_c0_c0_c1 {
        font-size: 28rpx;
        font-weight: 400;
        color: var(--benbenFontColor4);
        line-height: 45rpx;
    }

    .recharge_fd1_1_c0_c0_c0_c0 {
        font-size: 40rpx;
        font-weight: 400;
        color: var(--benbenFontColor4);
        line-height: 45rpx;
    }

    .recharge_fd1_1_c0_c0 {
        border: 1px solid var(--benbenbdColor2);
        background: rgba(235, 83, 5, 0.08);
        width: 206rpx;
        height: 120rpx;
        border-radius: 18rpx;
        position: relative;
        margin: 0rpx 9rpx 36rpx 9rpx;
        background-size: 100% auto;
        color: var(--benbenFontColor4);
    }

    .recharge_fd1_1 {
        padding: 0rpx 15rpx 0rpx 15rpx;
    }

    .recharge_fd1_0 {
        margin: 0rpx 32rpx 24rpx 32rpx;
        font-weight: 400;
        font-size: 28rpx;
        color: #333333;
        line-height: 40rpx;
    }

    .recharge_flex_2 {
        background: var(--benbenbgColor1);
        padding: 0rpx 24rpx 0rpx 24rpx;
        background-size: 100% auto;
        border-radius: 16rpx;
        margin: 0rpx 24rpx 0rpx 24rpx;
    }

    .recharge_fd2_3_c0_c2 {
        width: 36rpx;
        height: 36rpx;
        margin: 0rpx 0rpx 0rpx auto;
    }

    .recharge_fd2_3_c0_c1 {
        font-size: 28rpx;
        font-weight: 400;
        color: #333333;
        line-height: 40rpx;
    }

    .recharge_fd2_3_c0_c0 {
        width: 52rpx;
        height: 52rpx;
        margin: 0rpx 16rpx 0rpx 0rpx;
    }

    .recharge_fd2_3_c0 {
        margin: 0rpx 0rpx 32rpx 0rpx;
    }

    .recharge_fd2_2 {
        margin: 0rpx 0rpx 32rpx 0rpx;
        font-size: 32rpx;
        font-weight: 500;
        color: #333333;
        line-height: 45rpx;
    }

    .recharge_fd2_1_c1 {
        font-size: 32rpx;
        font-weight: 400;
        color: #333;
    }

    .recharge_fd2_1_c0 {
        font-size: 40rpx;
        font-weight: 400;
        color: #333;
        margin: 0rpx 27rpx 0rpx 0rpx;
    }

    .recharge_fd2_1 {
        border-bottom: 1px solid #eee;
        padding: 26rpx 0rpx 26rpx 0rpx;
        margin: 0rpx 0rpx 32rpx 0rpx;
    }

    .recharge_fd2_0 {
        margin: 32rpx 0rpx 0rpx 0rpx;
        font-weight: 400;
        font-size: 24rpx;
        color: #333333;
        line-height: 33rpx;
        text-align: left;
        font-style: normal;
    }

    .recharge_flex_3 {
        width: 750rpx;
        height: 88rpx;
        overflow: hidden;
        z-index: 10;
        bottom: calc(32rpx + var(--window-bottom));
    }

    .recharge_fd3_0 {
        background: var(--benbenbgColor0);
        border-radius: 44rpx 44rpx 44rpx 44rpx;
        font-size: 32rpx;
        color: #fff;
        width: 686rpx;
        height: 88rpx;
        line-height: 88rpx;
        font-weight: 500;
    }
</style>